{{extend name="index/index" /}}


{{block name="mycss"}}
<link rel="stylesheet" href="/static/index/css/dropload.css">
{{/block}}


{{block name="main"}}
<div class="row">
    <ul class="nav nav-pills col-md-offset-2">
        <li role="presentation" class="active"><a href="#home" data-toggle="tab" class="lead">网站日记</a></li>
        <li role="presentation"><a href="#publish" data-toggle="tab" class="lead">写日记</a></li>
        <li role="presentation"><a href="#received" data-toggle="tab" class="lead">收到的回复</a></li>
    </ul>
</div>

<div id="myTabContent" class="tab-content">
    <!--主页-->
    <div class="container addDiary tab-pane fade in active" id="home">

    </div>
    <!--写日记-->
    <div class="tab-pane fade container" id="publish">
        <form class="form-horizontal" id="mydemo" >
            <div class="form-group form-group-lg">
                <label class="col-sm-2 col-md-3 control-label">标题:</label>
                <div class="col-sm-10 col-md-4 form_control">
                    <input class="form-control required" type="text" id="title" name="title" data-valid="isNonEmpty"
                           data-error="* 标题不能为空">
                </div>
            </div>

            <div class="form-group form-group-lg">
                <label class="col-sm-2 col-md-3 control-label">描述:</label>
                <div class="col-sm-10 col-md-4 form_control">
                    <input class="form-control required" id="desc" type="text" name="desc" data-valid="isNonEmpty"
                           data-error="* 描述不能为空">
                </div>
            </div>

            <div class="form-group form-group-lg">
                <label class="col-sm-2 col-md-3 control-label">内容:</label>
                <div class="col-sm-10 col-md-4">
                    <textarea name="content" id="content"></textarea>
                </div>
            </div>

            <div class="form-group form-group-lg">
                <div class="col-sm-10 col-md-4 col-md-offset-5">
                    <button type="button" id="diarySubmit" class="btn-success btn ">提交</button>
                </div>
            </div>
        </form>
    </div>
    <!--未回复-->
    <div class="tab-pane fade container" id="received">
        <div class="row">
            <div class="col-md-3"><a>未回复</a></div>
        </div>
    </div>
</div>

<!-- model -->
<!-- Button trigger modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h3 class="modal-title text-center" id="myModalLabel" diary-id></h3>
            </div>
            <p class="modal-body lead" style="text-indent:2em">

            </p>
            <div class="row autho col-md-offset-9"></div>
            <div class="row time col-md-offset-9"></div>
            <div class="row col-md-offset-1 lead">评论区:</div>
            <table class="table table-condensed" style="table-layout:fixed;" id="getComment">
                <tr>
                    <td class="col-md-3">姓名:</td>
                    <td class="col-md-6" style="word-wrap:break-word;">内容</td>
                    <td class="col-md-3">时间</td>
                </tr>
            </table>

            <hr>
            <div class="row col-md-offset-1 lead"><b>发表评论:</b></div>
            <form>
                <textarea class="col-md-offset-1" id="comment" name="comment" cols="45" rows="4"
                          placeholder="请文明发言,字数在100字以内" maxlength="100" style="resize:none;"></textarea>
                <span>还可以输入<font style="color:red;" id="num">100</font>个字</span>
            </form>
            <!--<div class="modal-footer">-->
            <button type="button" id="sub" class="btn btn-primary col-md-offset-8">提交</button>
            <button type="button" class="btn btn-default " data-dismiss="modal">关闭</button>
            <!--</div>-->
        </div>
    </div>
</div>
<!-- end model -->

{{/block}}


{{block name="myjs"}}
<script src="/static/index/js/dropload.min.js"></script>

<!--百度文本编辑器-->
<script src="/static/index/ueditor/ueditor.config.js"></script>
<script src="/static/index/ueditor/ueditor.all.min.js"></script>
<script src="/static/index/ueditor/lang/zh-cn/zh-cn.js"></script>
<script>
    $(function () {
        var counter = 0;
        // 每页展示4个
        var num = 5;
        var pageStart = 0, pageEnd = 0;

        // dropload
        $('.container').dropload({
            scrollArea: window,
            loadDownFn: function (me) {
                $.ajax({
                    type: 'GET',
                    url: '/read/',
                    dataType: 'json',
                    success: function (data) {
                        if (data.status) {
                            var result = '';
                            counter++;
                            pageEnd = num * counter;
                            pageStart = pageEnd - num;

                            for (var i = pageStart; i < pageEnd; i++) {
                                var title = data.msg[i].title;
                                var reply = data.msg[i].reply;
                                var reading = data.msg[i].reading;
                                var desc = data.msg[i].desc;
                                var time = data.msg[i].time;
                                var id = data.msg[i].id;

                                result += '<div class="row" style="border: 2px solid #ccc;cursor:pointer">' +
                                    '<a onclick="readDiary(' + id + ')" data-toggle="modal" data-target="#myModal" title="点击查看" >' +
                                    '<div class="col-md-4 col-md-offset-1">' +
                                    '<img src="/static/index/img/meinv.jpg" alt="" class="img-thumbnail" style="height:185px;width:270px">' +
                                    '</div>' +
                                    '<div class="col-md-6 ">\n' +
                                    '<div class="row">\n' +
                                    '<h2><strong>' + title + '</strong></h2>\n' +
                                    '</div>\n' +
                                    '<div class="row">\n' +
                                    '<div class="col-md-4"><p>' + time + '</p></div>\n' +
                                    '<div class="col-md-3" ><p>评论(<font id="reply">' + reply + '</font>)</p></div>\n' +
                                    '<div class="col-md-3"><p>阅读(<font id="reading">' + reading + '</font>)</p></div>\n' +
                                    '</div>\n' +
                                    '<div class="row ">\n' +
                                    '<div class="lead" style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis">\n' + desc +
                                    '</div>\n' +
                                    '</div>\n' +
                                    '</div>\n' +
                                    '</a>' +
                                    '</div>\n' +
                                    '<div class="blog-divider"></div>';
                                if ((i + 1) >= data.msg.length) {
                                    // 锁定
                                    me.lock();
                                    // 无数据
                                    me.noData();
                                    break;
                                }
                            }
                            // 为了测试，延迟1秒加载
                            setTimeout(function () {
                                $('.addDiary').append(result);
                                // 每次数据加载完，必须重置
                                me.resetload();
                            }, 200);
                        } else {
                            alert(data.msg);
                        }
                    },
                    error: function (xhr, type) {
                        alert('Ajax error!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            }
        });
    });

    function readDiary(id) {
        var num = $('#reading').html();
        $.ajax({
            type: 'get',
            url: '/readDiary/' + id,
            dataType: 'json',
            success: function (data) {
                $('#reading').html(parseInt(num) + 1);
                $('#myModalLabel').html(data.arr1.title);
                $('#myModalLabel').attr('diary-id', id);
                $('.modal-body').html(data.arr1.content);
                $('.time').html(data.arr1.time);
                $('.autho').html(data.arr1.nickname);
                if (data.arr2.length == 0) {
                    var list = '<tr >' +
                        '<td colspan="3" id="noComment" class="text-center lead">暂无评论...</td>' +
                        '</tr>';
                    $('#noComment').empty();
                    $('#getComment').empty();
                    $('#getComment').append(list);
                }
                for (i = 0; i < data.arr2.length; i++) {
                    var list = '<tr >' +
                        '<td class="col-md-3">' + data.arr2[i].nickname + '</td>\n' +
                        '<td class="col-md-6 " style="word-wrap:break-word;">' + data.arr2[i].content + '</td>\n' +
                        '<td class="col-md-3"><h6>' + data.arr2[i].time + '</h6></td>\n' +
                        '</tr>';
                    $('#noComment').empty();
                    $('#getComment').empty();
                    $('#getComment').append(list);
                }
            },
            error: function () {
                alert('ajax请求错误');
            }
        });
    }

    // 检测输入的字数
    $(function () {
        $('#comment').keyup(function () {
            var num = 100;
            var text = $('#comment').val();
            var res = num - (text.length);
            $('#num').html(res);
        });

        $('#comment').mouseout(function () {
            var num = 100;
            var text = $('#comment').val();
            var res = num - (text.length);
            $('#num').html(res);
        });
    });

    // 提交评论
    $(function () {
        $('#sub').click(function () {
            var content = $('#comment').val();
            var id = $('#myModalLabel').attr('diary-id');
            if (content == '') {
                toastr.error('请输入文字');
                return false;
            }

            var res = {
                'content': content,
                'uid': 1,
                'did': id
            };

            $.ajax({
                type: 'post',
                url: '/comment/',
                data: res,
                dataType: 'json',
                success: function (data) {
                    var num = $('#reply').html();
                    if (data.status) {
                        var list = '<tr>\n' +
                            '<td class="col-md-3">' + res.uid + '</td>\n' +
                            '<td class="col-md-6" style="word-wrap:break-word;">' + res.content + '</td>\n' +
                            '<td class="col-md-3"><h6>刚刚</h6></td>\n' +
                            '</tr>';
                        $('#noComment').remove();
                        $('#reply').html(parseInt(num) + 1);
                        $('#getComment').append(list);
                        $('#comment').val('');
                        $('#sub').attr('disabled', true);
                        toastr.success(data.msg);
                    } else {
                        toastr.error(data.msg);
                    }
                },
                error: function () {
                    toastr.success('ajax请求错误');
                }
            });
        });
    });

    $('#myTab a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    });

    //    $('#myTab a[href="#profile"]').tab('show');
    // 百度文本编辑器
    UE.getEditor('content', {initialFrameWidth: 600, initialFrameHeight: 200});

    $(function () {
        $('#diarySubmit').click(function (event) {
            event.preventDefault();
            var res2 = $('#mydemo').validate('submitValidate');

            var res1 = UE.getEditor('content').hasContents();
            if (!res1) {
                toastr.error('内容不能为空');
            }

            if (res1 && res2) {
                var str = $('#mydemo').serialize();
                diaryAjax(str);
            }
        });
    });

    // 日记验证
    $('#mydemo').validate({
        onFocus: function () {
            this.parent().addClass('active');
            return false;
        },
        onBlur: function () {
            var $parent = this.parent();
            var _status = parseInt(this.attr('data-status'));
            $parent.removeClass('active');
            if (!_status) {
                $parent.addClass('error');
            }
            return false;
        }
    });


    // 上传日记ajax
    function diaryAjax(info) {
        $.ajax({
            type: 'post',
            url : '/commitDiary/',
            data: info,
            dataType: 'json',
            success: function (data) {
                if(data.status){
                    toastr.success(data.msg);
                    $('#title').val('');
                    $('#desc').val('');
                    UE.getEditor('content').setContent('')
                }
            },
            error: function (){
                alert('ajax请求错误');
            }
        });
    }
</script>

{{/block}}